'use client';
import React, { useState,useRef } from 'react';
import { Flex, message, Layout } from 'antd';
import CatalogMenus from './components/catalogMenus';
import ExcelHandle from './components/excelHanle';
import { TableProvider } from '@/hooks/tableHooks';
import { ExcelTableProvider } from '@/hooks/ExcelTableContext';

const ChatExcel: React.FC = () => {
  const [directoryOperationType, setDirectoryOperationType] = useState<string>('')
  const [fileOperationObject, setFileOperationObject] = useState<any>({ type: '', fileObject: {} })
  const [collapsed, setCollapsed] = useState(false);
  const [copilotStatus, setCopilotStatus] = useState<boolean>(false)
  //文件目录操作
  //selectedItem  recent 最近 favorite 收藏 myDocuments 我的文档 recycleBin 回收站 add 新建 import 导入
  const handleSelectedItemChange = (selectedItem: string) => {
    setDirectoryOperationType(selectedItem)
    setFileOperationObject({ type: '', fileObject: {} })
  }
  //文件操作 key :delete 删除, open 打开文件, copy 复制文件 , open_copilot 引用到copilot
  const handleOnFileClick = (key: string, file: object) => {
    setFileOperationObject({ type: key, fileObject: file })
    setDirectoryOperationType('')
    if (key == 'open_copilot') {
      setCopilotStatus(true)
    }
  }

  const catalogMenusRef:any = useRef(null);

  const getCatalogMenusChange = () => {
    if (catalogMenusRef.current) {
      catalogMenusRef.current.getLeftChange();
    }
  };
  return (
    <div className='w-full h-full flex box_index' >
      <CatalogMenus 
        ref={catalogMenusRef}
        onSelectedItemChange={handleSelectedItemChange}
        onFileClick={handleOnFileClick}
        collapsed={collapsed}
        setCollapsed={setCollapsed}
      />
      <ExcelHandle
        directoryOperationType={directoryOperationType}
        fileOperationObject={fileOperationObject}
        copilotStatus={copilotStatus}
        onCopilotStatusChange={setCopilotStatus}
        collapsed={collapsed}
        getCatalogMenusChange={getCatalogMenusChange}
      />
    </div>
  );
};

export default function ChatExcelPage() {
  return (
    <ExcelTableProvider>
      <TableProvider>
        <ChatExcel />
      </TableProvider>
    </ExcelTableProvider>
  );
}